;(function(){
	function LazyImage(opt){
		this.size = opt.size || 10; // 每次加载图片数量
		this.page = 1; // 记录已加载的图片数量，以及计算未加载的图片位置
		this.distance = opt.distance || 50; // 距离图片多远时开始加载
		this.delay = opt.delay || 50; // 滚动事件节流、默认50毫秒内只执行一次滚动事件
		this.container = document.querySelector(opt.container); // 图片列表容器元素dom
		this.imgList = document.querySelectorAll(opt.imgClass); // 图片元素dom
		this.init(); // 初始化
	}
	LazyImage.prototype = {
		init:function(){
			this.page = 1; // 初始化时分页重新开始
			for(let i = 0; i < this.size; i++){
				this.imgList[i].src = this.imgList[i].dataset.src;
			}
			let loadImg = this.throttle(this.loadImg,this.delay); // 滚动监听节流
			this.container.onscroll = () => {
				loadImg.apply(this)
			}
		},
		// 滚动时执行的图片加载事件
		loadImg(){
			let {container, page, size, imgList, distance} = this;
			let offsetTop = container.scrollTop + container.clientHeight + distance; // 滚动距离 + 容器高度 + 触发加载的距离
			let imgOffsetTop = imgList[page * size]?.offsetTop; // 需要加载的图片与容器顶部的距离
			if(!imgOffsetTop) return ;
			if(imgOffsetTop < offsetTop){
				for(let i = 0; i < size; i++){
					let item = imgList[i + page * size];
					if(!item) break;
					item.src = item.dataset.src;
				}
				this.page++;
			}
		},
		// 节流控制函数
		throttle(fn,time = 1000){
			let stamp = 0;
			return function(){
				let now = new Date().getTime();
				if(now - stamp > time){
					fn.apply(this, arguments);
					stamp = now;
				}
			}
		}
	}
	window.LazyImage = LazyImage;
})()
